<template>
  <div>
    <div class="title content">
      <img src="../../../../public/images/logo.png" @click="goIndex">
      <div class="nav">
        <ul>
          <li class="nav-li" @click="goIndex">
            <a>首页</a>
          </li>
          <li class="nav-li">
            课程分类<i class="el-icon-arrow-down"></i>
            <ul class="none">
              <li v-for="(i,index) in projectList" :key="index" @click=goSeach(i.subjectId)>
                {{ i.title }}
              </li>
            </ul>
          </li>
          <li class="nav-li">专属课程</li>
        </ul>
      </div>
      <div class="search">
        <input v-model="input" placeholder="搜索课程" class="searchText">
        <div class="searchIcon" @click="Seach">搜索</div>
      </div>
      <div class="titleIcon">
        <i class="el-icon-shopping-cart-2 shopping"></i>
        <span><Login/></span>
        <div class="user">
          <el-dropdown>
  <span class="el-dropdown-link">
             <i class="el-icon-user-solid"></i>

  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span @click="personalCenter(1)">个人中心</span></el-dropdown-item>
              <el-dropdown-item><span @click="personalCenter(2)">我的课程</span></el-dropdown-item>
              <el-dropdown-item><span @click="personalCenter(3)">我的订单</span></el-dropdown-item>
              <el-dropdown-item @click="loginBack">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>

</template>
<script src="../../../../public/font_2241509_z1yhdhvsg08/iconfont.js"></script>
<script>
import {postprojectList} from "@/api/index-api";
import {getClassseach} from "@/api/seach-api";
import {modifyLogout} from "@/api/user-api";
import Login from "@/views/user/components/Login";

export default {
  name: "TitleComponent",
  components: {
    Login

  },
  data() {
    return {
      input: '',
      projectList: ''
    }
  },
  created() {
    this.input = this.$route.query.keyword
    postprojectList().then(res => {
      this.projectList = res.rows
      // console.log(this.projectList)
    })
  },
  methods: {
    goIndex() {
      this.$router.push("/")
    },
    personalCenter(e) {
      this.$router.push({path: '/IndexPaging/?e=' + e})
    },
    loginBack() {
      modifyLogout().then(res => {
        modifyLogout().then(res => {
          if (res.code === 0) {
            this.$message({
              showClose: true,
              message: '恭喜你，退出登录',
              type: 'success'

            });
            this.$store.commit('changeUserInfo', {userInfos: null})
          }
        })

      })
    },
    Seach() {

      if (this.input !== this.$route.query.keyword){
        this.$router.push({
          path: '/SearchPage',
          query: {
            keyword: this.input,
            subjectId: '',
            type: '',
            courseType:''
          }
        })
        getClassseach(this.$route.query.keyword,this.$route.query.type,this.$route.query.subjectId,this.$route.query.courseType).then(res => {
          console.log(res)
          this.classList = res.courseList
          this.$emit("changeSeacg", res.courseList)
        })
      }

    },
    goSeach(e) {
      this.$router.push({
        path: '/SearchPage',
        query: {
          keyword:this.$route.query.keyword,
          subjectId: e.toString(),
          type: '',
          courseType: '',
        }
      })
      getClassseach(this.$route.query.keyword,this.$route.query.type, this.$route.query.subjectId, this.$route.query.courseType).then(res => {
        console.log(res)
        this.classList = res.courseList
        this.$emit("changeSeacg", res.courseList)
      })
    }
  }
}
</script>

<style scoped lang="less">

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.content {
  width: 1200px;
  margin: 0 auto;
}

.title {
  font-size: 18px;
  //display: flex;
  overflow: hidden;

  img {
    float: left;
    height: 55px;
    margin-top: 22px;
    //margin-right: 20px;
  }

  .search {
    float: left;
    width: 400px;
    margin: 30px 6px 0 0;

    border-radius: 40px;
    border: 1px solid #999999;
    overflow: hidden;

    .searchText {
      float: left;
      width: 280px;
      outline: none;
      height: 40px;
      border: none;
      padding: 0;
      padding-left: 20px;
    }

    .searchIcon {
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: rgb(0, 207, 140);
      color: white;
    }
  }

  .titleIcon {
    margin-right: 100px;
    font-size: 14px;
    padding: 32px 0 0;

    height: 100%;
    display: flex;
    justify-content: space-between;

    .shopping {
      color: #aaa;
      margin-left: 181px;
      margin-top: 12px;
    }
    span {
      margin: 0 10px;
    }

    .user {
      display: inline-block;
      line-height: 32px;
      text-align: center;
      width: 32px;
      color: #ffffff;
      height: 32px;
      background-color: #cccccc;
      border-radius: 50%;
    }
  }
}

.nav {
  float: left;

  ul {
    z-index: 11;
    overflow: hidden;
    list-style: none;
    margin: 40px 40px;
    padding: 0px;

    li {

      float: left;
      font-size: 16px;
      margin-right: 20px;
      //position: relative;
      .none {
        display: none;
        position: absolute;
        top: 20px;
        left: 390px;
        width: 130px;
        background-color: #ffffff;
        box-shadow: 0px 0px 0px 1px #dddddd;

        li {
          width: 130px;
          font-size: 14px;
          color: #999;
          margin: 0;
          padding: 4px 10px;
          float: none;

        }

        li:hover {
          background-color: #e6fff3;
          color: #1da57a;
        }
      }
    }

    li:nth-of-type(2):hover {
      .none {
        display: block;
      }
    }

    .nav-li:hover {
      color: #1da57a;
    }
  }
}

</style>